<template>
	<view class="wx-login">
		<!--#ifdef MP-WEIXIN-->
		<view class="login-bg">
			<image src="/static/image/login-bg.png" mode=""></image>
		</view>
		<!--#endif-->
		<text class="welcome">
			您好!
			欢迎登录数字监理
		</text>
		<view class="user_info">
			<view class="my-input">
				<input v-model="userInfo.username" class="uni-input" name="username" placeholder="请填写您的姓名"/>
			</view>
			<uni-data-checkbox class="role" v-model="userInfo.role" :localdata="roleRange"></uni-data-checkbox>
		</view>
		<button v-if="!isLogin" class="confirm" type="primary" @click="handleLogin">
			<image src="/static/image/wx-logo.png" mode=""></image>
			微信登录
		</button>
		<button v-else class="confirm" type="primary" @click="handleCreat">
			立即创建
		</button>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				userInfo: {
					"username": "",
					"role": 1
				},
				roleRange: [ {
					"value": 1,
					"text": "施工管理人员"
				},{
					"value": 0,
					"text": "监理人员"
				}],
				isLogin:false
			};
		},
		methods: {
			handleLogin() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes.code);
						request(`/person/employee/login/wx`, {
							method: 'POST',
							data: {
								code: loginRes.code
							}
						}).then((res) => {
							console.log(res.data, 'wxLogin');
							if (res.data.code == 200) {
								let result = res.data.data
								uni.setStorageSync('token', result.token)
								uni.setStorageSync('id', result.id)
								// uni.navigateTo({
								// 	url: `/pages/tabPage/inspect/inspect`
								// });
							}
						})
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	// #ifdef H5
	.wx-login {
		height: 100vh;
		overflow: hidden;
		background-image: url('@/static/image/login-bg.png');
		background-size: contain;
		background-repeat: no-repeat;

		.welcome {
			display: block;
			font-size: 58rpx;
			font-weight: 700;
			margin-top: 20vh;
			line-height: 85rpx;
			margin-left: 50rpx;
		}

	}

	// #endif
	// #ifdef MP-WEIXIN
	.login-bg {
		image {
			height: 700rpx;
			width: 100vw;
		}
	}

	.welcome {
		position: absolute;
		top: 300rpx;
		left: 50rpx;
		line-height: 85rpx;
		font-size: 58rpx;
		font-weight: 700;
	}

	// #endif
	button {
		width: 80%;
		position: absolute;
		bottom: 100rpx;
		left: 10%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 48rpx;
			height: 48rpx;
			margin: 0 10rpx;
		}
	}

	.user_info {
		position: absolute;
		top: 600rpx;
		left: 5vw;
		width: 90vw;
		padding: 10rpx;
		// background-color: #9fff7c;
		.my-input{
			border: none;
			border-bottom: 1px solid rgba(204, 204, 204, 1);
			.uni-input {
				font-size: 32rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
		.role {
			display: block;
			margin-top: 40rpx;
		}
	}

</style>